<template>
  <div class="knowledge-container">
    <el-card class="search-card">
      <el-input
        v-model="searchQuery"
        placeholder="请输入问题关键词"
        clearable
        @keyup.enter="searchKnowledge"
      >
        <template #append>
          <el-button :icon="Search" @click="searchKnowledge" />
        </template>
      </el-input>
    </el-card>
    
    <el-card class="result-card">
      <template #header>
        <div class="card-header">
          <span>知识库问答结果</span>
        </div>
      </template>
      
      <div v-if="searchResults.length" class="result-list">
        <div v-for="(result, index) in searchResults" :key="index" class="result-item">
          <div class="result-title">
            <el-link type="primary" :underline="false">{{ result.title }}</el-link>
          </div>
          <div class="result-content">{{ result.content }}</div>
          <div class="result-meta">
            <span>来源: {{ result.source }}</span>
            <span>更新时间: {{ result.updateTime }}</span>
          </div>
        </div>
      </div>
      
      <div v-else class="empty-result">
        <el-empty description="暂无相关结果" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const searchQuery = ref('')
const searchResults = ref([])

const searchKnowledge = () => {
  if (!searchQuery.value.trim()) {
    return
  }
  
  // 模拟搜索
  searchResults.value = [
    {
      id: 1,
      title: '如何配置Vue开发环境？',
      content: '配置Vue开发环境需要安装Node.js和npm，然后使用Vue CLI创建项目。',
      source: '前端开发文档',
      updateTime: '2023-06-15'
    },
    {
      id: 2,
      title: 'Element Plus安装指南',
      content: '安装Element Plus可以通过npm或yarn进行安装，然后在main.js中引入。',
      source: 'UI组件库文档',
      updateTime: '2023-07-01'
    },
    {
      id: 3,
      title: 'Vue Router基本用法',
      content: 'Vue Router是Vue.js的官方路由管理器，用于构建单页面应用。',
      source: 'Vue官方文档',
      updateTime: '2023-05-20'
    }
  ]
}
</script>

<style lang="scss" scoped>
.knowledge-container {
  padding: 20px;
  
  .search-card {
    margin-bottom: 20px;
  }
  
  .result-card {
    .result-list {
      .result-item {
        padding: 15px 0;
        border-bottom: 1px solid #ebeef5;
        
        .result-title {
          font-size: 16px;
          margin-bottom: 8px;
        }
        
        .result-content {
          color: #606266;
          margin-bottom: 8px;
          line-height: 1.6;
        }
        
        .result-meta {
          font-size: 12px;
          color: #909399;
          
          span {
            margin-right: 15px;
          }
        }
        
        &:last-child {
          border-bottom: none;
        }
      }
    }
    
    .empty-result {
      padding: 40px 0;
    }
  }
}
</style>